<template>
    <div class="bgbox"></div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="uploadList()"
        style="padding: 0;border: 0;margin-top: 10px;">
        <el-tab-pane v-for="item in navboxlist" :key="item" :label="item" :name="item">
            <template #label>
                <span class="navspan">
                    {{ item }}
                </span>
            </template>
        </el-tab-pane>
    </el-tabs>
    <div class="masonry">
        <div class="biglistbox">
            <div class="itembox" v-for="item in listImg" :key="item._id" @click="gotoxiangqing(item._id, item.userID)">
                <img :src="item.UploadContent[0]" alt="作品">
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue';
import { GetuploadList } from '@/api/Uploadyourwork'
import { useRouter } from 'vue-router'
const router = useRouter();
const navboxlist = ref(["二次元", '男士头像', '女士头像', '卡通头像', '漫画插图', '摄影作品', '游戏艺术', '背景图片'])
const activeName = ref('二次元')
const listImg = ref([])
const uploadList = async () => {
    let data = await GetuploadList(activeName.value)
    const { resultCode, resultInfo } = data
    if (resultCode == 1) {
        listImg.value = resultInfo.list
    }
}
//点击查看详情
const gotoxiangqing = (img_id, userID) => {
    localStorage.setItem("XIANG_QING", JSON.stringify({ img_id, userID }))
    // router.push({ path: '/workdetails' })
    let routeUrl = router.resolve({
        path: "/workdetails",
    })
    window.open(routeUrl.href, '_blank')
}
onMounted(() => {
    uploadList()
});
</script>
  
<style scoped lang="scss">
.demo-tabs {
    .navspan {
        background-color: #000;
        color: #fff;
        padding: 10px 30px;
        border: 1px solid #eee;
        border-radius: 5px;
        margin: 0 -10px;
    }
}

.bgbox {
    width: 100%;
    // min-width: 450px;
    height: 180px;
    background: url(/img/bg2.jpg) no-repeat;
    background-position: center center;
    background-size: 100% auto;
    // background-attachment: fixed;
    // margin: -100px 0;
}

.biglistbox {
    margin: 10px;
    column-count: 7;
    column-gap: 30px;

    .itembox {
        margin-bottom: 10px;
        color: #000;
        box-shadow: 2px 2px 2px 2px #666;
        border-radius: 15px;
        overflow: hidden;

        img {
            margin-bottom: -4px;
            width: 100%;
            height: 100%;
        }
    }
}

//适应屏幕
@media screen and (max-width: 1500px) {
    .biglistbox {
        column-count: 6; // two columns on larger phones
    }
}

@media screen and (max-width: 1300px) {
    .biglistbox {
        column-count: 5; // two columns on larger phones
    }
}

@media screen and (max-width: 1000px) {
    .biglistbox {
        column-count: 4; // two columns on larger phones
    }
}

@media screen and (max-width: 800px) {
    .biglistbox {
        column-count: 3; // two columns on larger phones
    }
}

@media screen and (max-width: 500px) {
    .biglistbox {
        column-count: 2; // two columns on larger phones
    }
}
</style>